﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网络导航条</title>
    <style>
        /* 先把这个 myMenu 的样式放到css里 */
        .myMenu td{font-size:12px;
            font-family:verdana,arial;
            font-weight:bolder;
            color:#ffffff;
            border:1px solid #336699;
            background:#336699;
            filter:blendtrans(duration=0.5);
            cursor:hand;
            text-align:center;
        }
    </style>
    <script  type="text/javascript">
        //把事件动作绑定到菜单上
        function addMenu(objid){
            var tds=objid.getElementsByTagName('td');
            for(var i=0;i<tds.length;i++){
                with(tds[i]){
                    onmouseover=function(){
                        with(this){
                            filters[0].apply();
                            style.background='#FEBD20';            //鼠标移上去时的背景颜色
                            style.border='1px solid #ffffff';      //边框
                            style.color='black';                   //文字颜色
                            filters[0].play();
                        }
                    }
                    onmouseout=function(){
                        with(this){
                            filters[0].apply();
                            style.background='#336699';            //鼠标离开时的背景颜色
                            style.border='1px solid #336699';      //边框
                            style.color='#ffffff';                 //文字颜色
                            filters[0].play();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<table class="myMenu" id="menuTbl" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#00000" align="center">
    <tr>
        <td>网站介绍</td>
        <td>开发文档</td>
        <td>下载软件</td>
        <td>开源管理</td>
        <td>网站服务</td>
    </tr>
</table>
<script>
    addMenu(menuTbl);
</script>
</body>
</html>